<template>
<div class="audit">
  <el-dialog :title="title" width="680px" class="icon-dialog" top="5vh" :visible.sync="show" @open="open" :before-close="closeForm">
    <el-form :model="form" :rules="formRules" ref="form" label-width="120px" class="demo-ruleForm">
        <el-form-item :label="item.field_name" prop="name" v-for="(item,k) in field" :key="k">
          <div v-if="item.field_type == 1">
            {{item.value}}
          </div>
          <div v-if="item.field_type == 2">
            <div v-for="(item1,k1) in item.option" :key="k1">
              <span v-if="item1.id==item.value">{{item1.name}}</span>
            </div>
          </div>
          <div v-if="item.field_type == 3">
            <div v-for="(item1,k1) in item.option" :key="k1">
              <span v-if="item1.id==item.value">{{item1.name}}</span>
            </div>
          </div>
          <div v-if="item.field_type == 4">
            <span v-if="item.value == 1">开启</span>
            <span v-else>关闭</span>
          </div>
          <div v-if="item.field_type == 5">
            {{item.value}}
          </div>
          <div v-if="item.field_type == 6">
            {{item.value}}
          </div>
          <div v-if="item.field_type == 7">
            {{item.value}}
          </div>
          <div v-if="item.field_type == 8">
            {{item.value}}
          </div>
          <div v-if="item.field_type == 9">
            <div v-if="item.value.length > 0">
              <img :src="item1.url" v-for="(item1, k1) in item.value" :key="k1" style="width: 60px;"/>
            </div>
          </div>
          <div v-if="item.field_type == 11">
            {{item.value}}
          </div>
        </el-form-item>

        <el-form-item label="审核名称" prop="" >
          {{form.audit_role.name}}
        </el-form-item>

        <el-form-item label="审核状态" prop="audit_status" >
          <el-radio-group v-model="form.audit_status">
            <el-radio label="0">不通过</el-radio>
            <el-radio label="1">通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="form.audit_role.field.length > 0 && form.audit_status=='1'" v-for="(item1, key1) in form.audit_role.field" :key="key1">
          <el-form-item :label="item1.title" :prop="item1.name">
            <el-date-picker v-if="item1.type=='date'"
                            v-model="item1.value"
                            type="date"
                            placeholder="选择日期"
                            size="medium"></el-date-picker>
          </el-form-item>
        </div>
        <el-form-item label="审核备注" prop="">
          <div class="audit">
            <el-input type="textarea" v-model="form.audit_remark['index_'+form.audit_role.index]" size="medium"  placeholder="请输入，限150个字符" style="width:400px;"></el-input>
          </div>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="medium" @click="onSubmit()" v-if="!loading">确 定</el-button>
      <el-button type="primary" size="medium" v-else>保存中..</el-button>
      <el-button size="medium" @click="closeForm">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { getInfoField,getDataInfo,saveAudit } from '@/api/user/basic'
export default {
  name: "basic_edit_data",
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: {}
    },
/*    id: {
      type: String,
      default: '',
    },*/
    bid: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      title: '审核',
      activeName: '1',
      field: [],
      form: {
        id: typeof this.id != 'undefined' ? this.id : '',
        mid: '',
        field: [],
        audit_role: {
          field: {
            title: ''
          }
        },
        audit_status: '',
        audit_remark: []
      },
      formRules: {
        audit_status: [{required: true, message: '请选择审核状态', trigger: 'blur'}],
      },
      list: [],
      loading: false,
    }
  },
  created() {

  },
  methods: {
    open() {
      if (typeof this.info.id != 'undefined') {
        this.form.id = this.info.id
        this.getDataInfo()
      } else {
        if (typeof this.bid != 'undefined') {
          this.getInfoField()
        }
      }
    },
    getDataInfo() {
      getDataInfo({id: this.form.id, type: 'audit'}).then(res=>{
        this.field = JSON.parse(JSON.stringify(res.data.list))
        this.form.audit_role = JSON.parse(JSON.stringify(res.data.audit_role))
        this.form.audit_remark = JSON.parse(JSON.stringify(res.data.audit_remark))
        this.form.mid = res.data.mid
        this.title = res.data.name
        this.$forceUpdate()
      })
    },
    getInfoField() {
      getInfoField({id: this.bid}).then(res => {
        if (res.code == 0) {
          this.form.field = JSON.parse(JSON.stringify(res.data.list))
          this.$forceUpdate()
        }
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          saveAudit(this.form).then(res => {
            this.loading = false
            if (res.code == 0) {
              this.$message.success('操作成功')
              this.$emit('callFn')
              this.closeForm()
            }
          })
        }
      })
    },
    closeForm() {
      this.$emit('update:show', false)
    },
  }
}
</script>

<style scoped lang="scss">

  .el-textarea__inner {
    border: none !important; //0px solid #DCDFE6
    border-radius: 4px;
  }


.form {
  .submit_btn {
    margin-left: 120px;
  }
  /deep/.el-tabs {
    width: 99%;
    margin: 0 auto;
  }
  .data {
    width: 90%;
    border-radius: 5px;
    background: #f3f3f3;
    margin-bottom: 10px;
    position: relative;
    .el-icon-circle-close {
      position: absolute;
      top: -6px;
      right: -8px;
      font-size: 20px;
      cursor:pointer;
    }
    .data_list {
      display: flex;
      margin: 5px;
      line-height: 50px;
      .option_list {
        margin-right: 10px;
      }
    }
  }
}
</style>